<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>
        7-Next应用中添加样式的方式
    </title>
</head>

<body>
    <div>
        <h1>css样式</h1>
        <div>
            <p>一：内置 styled-jsx</p>
            <p>在 Next.js 中内置了 styled-jsx，它是一个CSS-in-JS库，允许在React组件中编写
                css，css仅就作用于组件内部
            </p>
            <p>
                <style jsx>
                    {
                        ` .demo {
                            color: red;
                        }

                        `
                    }
                </style>
            </p>
        </div>
        <div>
            <p>二：css模块</p>
            <p>通过使用css模块功能，允许将组件的 css 样式编写在单独的 css 文件中</p>
            <p>css 模块约定样式文件的名称必须为“组件文件名称.module.css”</p>
            <p>
                // 文件index.module.css
                .p { color: green }

                // 引入文件
                import style from './index.module.css'

                <div className={style.p}></div>
            </p>
        </div>
        <div>
            <p>三：全局样式文件</p>
            <p>1.在pages文件夹中新建_app.js 文件夹并添加如下代码</p>
            <p>
                export default function App({Component,pageProps}){
                return
                <Component {...pageProps} />
                }
            </p>
            <p>2.在项目根目录创建style 文件夹，并在其中创建global.css</p>
            <p>3.在_app.js中通过import引入global.css</p>
            <p>4.重新启动开发服务器</p>
        </div>
    </div>
</body>

</html>